<script setup lang="ts">
import {computed} from "vue";
import _ from "lodash";
import heartSentenceArray from "@/util/heartSentenceArray";

function formattedMonthYear() {
  const now = new Date();
  const monthNames = [
    'Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.',
    'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'
  ];
  const month = monthNames[now.getMonth()];
  const year = now.getFullYear();
  return `${month} ${year}`;
}
const heartSentence = computed(() => {
  return _.sample(heartSentenceArray);
});

</script>

<template>
  <div class="coder-calendar flex flex-col relative mt-8">
    <div class="block-one ellipse absolute left-14 w-3 h-5 p-0.5 bg-white">
      <div class="inner-ellipse h-full w-full"></div>
    </div>
    <div class="block-two ellipse absolute right-14 w-3 h-5 p-0.5 bg-white">
      <div class="inner-ellipse h-full w-full"></div>
    </div>
    <div class="part-top flex flex-col items-start">
      <span class="current-day font-bold text-[57px] leading-[74px]">{{ new Date().getDate() }}</span>
      <span class="date text-base leading-6 font-normal">{{ formattedMonthYear() }}</span>
    </div>
    <div class="part-mid overflow-hidden">
      <div class="skeleton">
        <div class="title leading-9 font-semibold text-[24px] mb-3">
          宜删库跑路
        </div>
        <a-tooltip>
          <template #title>
            <span>{{ heartSentence }}</span>
          </template>
          <div class="chicken-soup font-normal text-[14px] leading-6 line-clamp-1 cursor-pointer">
            {{ heartSentence }}
          </div>
        </a-tooltip>
      </div>
    </div>
    <div class="part-down">
      <div class="logo-text flex flex-col font-normal text-[12px]">
        <img data-v-e0954bf8="" src="@/assets/home/logo1.svg" alt="logo" class="logo h-6 w-fit">
        <span class="text leading-5 mt-2">扫描右侧二维码分享给好友</span>
      </div>
      <a-qrcode class="qrcode w-12 h-12" :value="'https://www.fqxk.com.cn'" :size="60"/>
    </div>
  </div>
</template>

<style scoped lang="less">
:deep(.ant-qrcode){
  padding: 0;
}

.coder-calendar .ellipse {
  border-radius: 50px;
  transform: translateY(-50%);
}
.coder-calendar .ellipse .inner-ellipse {
  border-radius: 50px;
  background-color: #6aa1ff;
}
.coder-calendar .part-top {
  padding: 30px 0 30px 24px;
  background-image: url(@/assets/task/coderCalendar.png);
  background-repeat: no-repeat;
  color: #e8f3ff;
  background-size: 100% 158px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.coder-calendar .part-mid {
  height: calc(100% - 238px);
  padding: 34px 24px;
  background-color: #fff;
  border: 1px solid #e5e6eb;
  border-top: none;
  border-bottom: none;
}
.part-mid .skeleton .title {
  color: #1e80ff;
}
.part-mid .skeleton .chicken-soup {
  color: #4e5969;
}
.coder-calendar .part-down {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  background-color: #f7f8fa;
  border: 1px solid #e5e6eb;
  border-top: none;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
.coder-calendar .part-down .logo-text {
  color: #86909c;
}
</style>
